<template>
  <div class="line-echart">
    <base-chart id="chartsMax" :options="state.options" :height="height" />
  </div>
</template>

<script setup>
import BaseChart from '@/base-ui/echart/base-chart.vue'
import { computed, reactive, watch } from 'vue'
import emitter from '@/utils/bus'
const state = reactive({
  // dataName:['预报时间']
  options: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },

    // legend: {
    //     show: true,
    //     x: 'center',
    //     y: 60,
    //     textStyle: {
    //         color: '#fff', // 图例文字颜色
    //         fontSize: 16,
    //     }
    // },
    legend: [
      {
        top: 10,
        data: [],
        type: 'scroll'
      },
      {
        top: 30,
        data: [],
        type: 'scroll'
      },
      {
        top: 50,
        data: [],
        type: 'scroll'
      },
      {
        top: 70,
        data: [],
        type: 'scroll'
      },
      {
        top: 90,
        data: [],
        type: 'scroll'
      }
    ],
    grid: [
      { x: '8%', y: '20%', height: '30%' },
      { x: '8%', y2: '15%', height: '38%' }
    ],
    //多个图，就要定义多个x轴，虽然我这个表的x轴是一样的
    xAxis: [
      {
        show: false, //隐藏了x轴
        type: 'category',
        gridIndex: 0, //对应前面grid的索引位置（第一个）
        axisTick: {
          alignWithLabel: true
        },

        axisLabel: {
          interval: 6 //x轴显示的数量，我这里是动态算的
        },
        data: props.xLabels
      },
      {
        show: true,
        type: 'category',
        min: '0',
        max: '1000',
        splitLine: {
          show: true
        },
        axisTick: {
          alignWithLabel: true
        },
        gridIndex: 1, //对应前面grid的索引位置（第二个）
        //   axisLabel:{
        //     interval:1,
        // },
        data: props.xLabels
      }
    ],
    //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配
    yAxis: [
      {
        type: 'value',
        gridIndex: 1, //对应前面grid的索引位置（第二个）
        name: '流量',
        nameLocation: 'middle',
        position: 'right',
        splitNumber: 3,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [15, 0, 0, 0]
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        gridIndex: 1,
        nameLocation: 'middle',
        name: '水位',
        splitNumber: 5,
        position: 'left',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          showMaxLabel: false
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        name: '降雨量',
        position: 'left',
        splitNumber: 3,
        nameLocation: 'middle', //y轴name的位置
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12 //y轴坐标轴上的字体大小
          }
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        name: '',
        position: 'right',
        splitNumber: 3,
        nameLocation: 'middle', //y轴name的位置
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12 //y轴坐标轴上的字体大小
          }
        }
      }
    ],

    //数据就要选择是哪个x,y轴与之对应
    series: [],
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 20,
        bottom: '0%',
        start: 0,
        end: 100
      },
      {
        type: 'inside'
      }
    ]
  }
})
const props = defineProps({
  height: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  xLabels: {
    type: Array,
    default: () => []
  },
  servers: {
    type: Array,
    default: () => []
  }
})

let options = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },

    // legend: {
    //     show: true,
    //     x: 'center',
    //     y: 60,
    //     textStyle: {
    //         color: '#fff', // 图例文字颜色
    //         fontSize: 16,
    //     }
    // },
    legend: [
      {
        top: 10,
        data: [],
        type: 'scroll'
      },
      {
        top: 30,
        data: [],
        type: 'scroll'
      }
    ],
    grid: [
      { x: '8%', y: '20%', height: '30%' },
      { x: '8%', y2: '15%', height: '38%' }
    ],
    //多个图，就要定义多个x轴，虽然我这个表的x轴是一样的
    xAxis: [
      {
        show: false, //隐藏了x轴
        type: 'category',
        gridIndex: 0, //对应前面grid的索引位置（第一个）
        axisTick: {
          alignWithLabel: true
        },

        axisLabel: {
          interval: 6 //x轴显示的数量，我这里是动态算的
        },
        data: props.xLabels
      },
      {
        show: true,
        type: 'category',
        min: '0',
        max: '1000',
        splitLine: {
          show: true
        },
        axisTick: {
          alignWithLabel: true
        },
        gridIndex: 1, //对应前面grid的索引位置（第二个）
        //   axisLabel:{
        //     interval:1,
        // },
        data: props.xLabels
      }
    ],
    //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配
    yAxis: [
      {
        type: 'value',
        gridIndex: 1, //对应前面grid的索引位置（第二个）
        name: '流量',
        nameLocation: 'middle',
        position: 'right',
        splitNumber: 3,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [15, 0, 0, 0]
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        gridIndex: 1,
        nameLocation: 'middle',
        name: '水位',
        splitNumber: 5,
        position: 'left',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          showMaxLabel: false
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        name: '降雨量',
        position: 'left',
        splitNumber: 3,
        nameLocation: 'middle', //y轴name的位置
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12 //y轴坐标轴上的字体大小
          }
        }
      },
      {
        type: 'value',
        gridIndex: 0,
        name: '',
        position: 'right',
        splitNumber: 3,
        nameLocation: 'middle', //y轴name的位置
        inverse: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#000'
          }
        },
        nameTextStyle: {
          padding: [0, 0, 10, 0]
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 12 //y轴坐标轴上的字体大小
          }
        }
      }
    ],

    //数据就要选择是哪个x,y轴与之对应
    series: [],
    dataZoom: [
      {
        type: 'slider',
        show: true,
        height: 20,
        bottom: '0%',
        start: 0,
        end: 100
      },
      {
        type: 'inside'
      }
    ]
  }
})
watch(
  () => {
    props.servers
  },
  () => {
    if (props.servers.length && props.servers[0].result.length) {
      emitter.emit('clearEcharts')
      state.options.series = []
      state.options.legend[0].data = []
      state.options.legend[1].data = []
      state.options.legend[2].data = []
      state.options.legend[3].data = []
      state.options.legend[4].data = []
      //时间集合
      let timeArr = []
      //预报水位集合
      let preWaterwArr = []
      //实测水位集合
      let realWaterArr = []
      //预报流量集合
      let preFlowArr = []
      //实测流量集合
      let realFlowArr = []
      //降雨量集合
      let rainArr = []
      //
      let timeFilter = []
      let preWaterwFilter = []
      let realFlowFilter = []
      let rainFilter = []
      let preFlowFilter = []
      if (props.servers[0].result.length == 1) {
        props.servers[0].result[0].ccResult.forEach((item) => {
          timeArr.push(item.tm)
          preWaterwArr.push(item.fz)
          realWaterArr.push(item.rz)
          preFlowArr.push(item.fq)
          realFlowArr.push(item.rq)
          rainArr.push(item.fp)
        })
        timeArr = [timeArr]
        preWaterwArr = [preWaterwArr]
        realWaterArr = [realWaterArr]
        preFlowArr = [preFlowArr]
        realFlowArr = [realFlowArr]
        rainArr = [rainArr]
      } else {
        props.servers[0].result.forEach((e, eIndex) => {
          // let arr = [e.tm,e.]
          timeFilter = e.ccResult.map((child, childIndex) => {
            return child.tm
          })
          preWaterwFilter = e.ccResult.map((child, childIndex) => {
            return child.fz
          })
          realFlowFilter = e.ccResult.map((child, childIndex) => {
            return child.rz
          })
          preFlowFilter = e.ccResult.map((child, childIndex) => {
            return child.fq
          })
          realFlowFilter = e.ccResult.map((child, childIndex) => {
            return child.rq
          })
          rainFilter = e.ccResult.map((child, childIndex) => {
            return child.fp
          })
          timeArr.push(timeFilter)
          preWaterwArr.push(preWaterwFilter)
          realWaterArr.push(realFlowFilter)
          preFlowArr.push(preFlowFilter)
          realFlowArr.push(realFlowFilter)
          rainArr.push(rainFilter)
        })
      }
      //一种方案对比
      if (props.servers[0].result.length == 1) {
        state.options.xAxis[1].data = timeArr[0]
        state.options.legend[0].data.push(
          //  {
          //   name:props.servers[0].result[0].scInfo.sc_name+':',
          //   icon:'none'
          // },
          {
            name: '预报水位',
            itemStyle: { opacity: 0 }
          },
          {
            name: '预报流量',
            itemStyle: { opacity: 0 }
          },
          {
            name: '实测水位',
            itemStyle: { opacity: 0 }
          },
          {
            name: '实测流量',
            itemStyle: { opacity: 0 }
          },
          '降雨量'
        )
        state.options.series.push(
          //    {
          //   type: 'line',
          //   symbolSize: 0,
          //   name:props.servers[0].result[0].scInfo.sc_name+':',
          //     lineStyle: {
          //       // type: 'dashed',
          //       // color: '#F22E2E'
          //     },
          //   xAxisIndex: 1,
          //   yAxisIndex: 1,
          //   smooth: true,
          //   data: []
          // },
          {
            type: 'line',
            symbolSize: 0,
            name: '预报水位',
            lineStyle: {
              // type: 'dashed',
              // color: '#F22E2E'
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            smooth: true,
            data: preWaterwArr[0]
          },
          {
            type: 'line',
            symbolSize: 0,
            name: '预报流量',
            lineStyle: {
              // type: 'solid'
            },
            smooth: true,
            symbol: 'circle',
            showSymbol: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: preFlowArr[0]
          },
          {
            type: 'line',
            symbolSize: 0,
            name: '实测水位',
            lineStyle: {
              // type: 'solid'
            },
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: realWaterArr[0]
          },
          {
            type: 'line',
            symbolSize: 0,
            name: '实测流量',
            lineStyle: {
              // type: 'solid'
            },
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: realFlowArr[0]
          },
          {
            name: '降雨量',
            type: 'bar',
            barWidth: '20%',
            barGap: '-100%',
            smooth: true,
            xAxisIndex: 0,
            yAxisIndex: 2,
            stack: '降雨量',
            data: rainArr[0],
            // itemStyle: {
            //   color: 'blue'
            // },
            min: 0
          }
        )
      }
      //添加预报时间、警戒水位、警戒流量
      state.options.series.push(
        {
          type: 'line',
          name: '预报时间',
          xAxisIndex: 1,
          yAxisIndex: 1,
          markLine: {
            symbol: 'none', // 去掉标线最后面的箭头
            data: [
              {
                silent: false, // 鼠标悬停事件  true没有，false有
                lineStyle: {
                  type: 'dashed',
                  color: '#FF0000'
                },
                name: '预报时间',
                xAxis: props.servers[0].info.fcTime,
                // xAxis: '2023-06-03 04:00:00',
                label: {
                  formatter: function (v) {
                    return v.name + '：' + v.value
                  }
                }
              }
            ]
          }
        },
        {
          type: 'line',
          lineStyle: {
            opacity: 0,
            color: '#FF0000'
          },
          tooltip: {
            show: false
          },
          symbolSize: 0,
          name: '警戒水位',
          xAxisIndex: 1,
          yAxisIndex: 1,
          // id: 'warningLine',
          data: [props.servers[0].result[0].warnInfo.wrz],
          markLine: {
            symbol: 'none', // 去掉标线最后面的箭头
            label: {
              distance: [200, 30],
              position: 'middle', // start middle end
              formatter: function (v) {
                return v.name + '：' + v.value
              }
            },
            data: [
              {
                silent: false, // 鼠标悬停事件  true没有，false有
                lineStyle: {
                  type: 'solid',
                  color: '#FF0000'
                },
                name: '警戒水位',
                yAxis: props.servers[0].result[0].warnInfo.wrz
              }
            ]
          }
        },
        {
          type: 'line',
          lineStyle: {
            opacity: 0,
            color: '#FF0000'
          },
          tooltip: {
            show: false
          },
          symbolSize: 0,
          name: '警戒流量',
          xAxisIndex: 1,
          yAxisIndex: 1,
          id: 'warning',
          data: [props.servers[0].result[0].warnInfo.wrq],
          markLine: {
            symbol: 'none', // 去掉标线最后面的箭头
            label: {
              distance: [200, 30],
              position: 'middle', // start middle end
              formatter: function (v) {
                return v.name + '：' + v.value
              }
            },
            data: [
              {
                silent: false, // 鼠标悬停事件  true没有，false有
                lineStyle: {
                  type: 'solid',
                  color: '#FF0000'
                },
                name: '警戒流量',
                yAxis: props.servers[0].result[0].warnInfo.wrq
              }
            ]
          }
        }
      )
      //多种方案对比
      if (props.servers[0].result.length > 1) {
        // let newArr = props.servers[0].result
        props.servers[0].result.forEach((child, childIndex) => {
          state.options.xAxis[1].data = timeArr[childIndex]
          state.options.series.push(
            {
              type: 'line',
              symbolSize: 0,
              name: child.scInfo.sc_name + ':',
              lineStyle: {
                // type: 'dashed',
                // color: '#F22E2E'
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
              smooth: true,
              data: []
            },
            {
              type: 'line',
              symbolSize: 0,
              name: '预报水位' + childIndex,
              lineStyle: {
                // type: 'dashed',
                // color: '#F22E2E'
              },
              xAxisIndex: 1,
              yAxisIndex: 1,
              smooth: true,
              data: preWaterwArr[childIndex]
            },
            {
              type: 'line',
              symbolSize: 0,
              name: '预报流量' + childIndex,
              lineStyle: {
                // type: 'solid'
              },
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: preFlowArr[childIndex]
            },
            {
              type: 'line',
              symbolSize: 0,
              name: '实测水位' + childIndex,
              lineStyle: {
                // type: 'solid'
              },
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: realWaterArr[childIndex]
            },
            {
              type: 'line',
              symbolSize: 0,
              name: '实测流量' + childIndex,
              lineStyle: {
                // type: 'solid'
              },
              smooth: true,
              symbol: 'circle',
              showSymbol: false,
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: realFlowArr[childIndex]
            },
            {
              name: '降雨量' + childIndex,
              type: 'bar',
              barWidth: '20%',
              barGap: '-100%',
              smooth: true,
              xAxisIndex: 0,
              yAxisIndex: 2,
              stack: '降雨量',
              data: rainArr[childIndex],
              // itemStyle: {
              //   color: 'blue'
              // },
              min: 0
            }
          )
          state.options.legend[childIndex].data.push(
            {
              name: child.scInfo.sc_name + ':',
              icon: 'none'
            },
            {
              name: '预报水位' + childIndex,
              itemStyle: { opacity: 0 }
            },
            {
              name: '预报流量' + childIndex,
              itemStyle: { opacity: 0 }
            },
            {
              name: '实测水位' + childIndex,
              itemStyle: { opacity: 0 }
            },
            {
              name: '实测流量' + childIndex,
              itemStyle: { opacity: 0 }
            },
            '降雨量' + childIndex
          )
        })
      }
    } else {
      emitter.emit('clearEcharts')
      state.options.series = []
      state.options.legend[0].data = []
      state.options.legend[1].data = []
      state.options.legend[2].data = []
      state.options.legend[3].data = []
      state.options.legend[4].data = []
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style lang="less" scoped>
.line-echart {
  height: 100%;
}
#chartsMax {
  background: #f2f2f2;
}
</style>
